<template>
  <div v-on:keyup.enter="search">
<!--  功能不完整  -->
    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-text-field
            solo
            hide-details
            label="请输入关键词"
            append-icon="search"
            v-model="searchValue"
            class="input-search"
            autocomplete="off"
            v-on="on"
            ref="search"
        ></v-text-field>
      </template>
      <v-list v-if="items.length > 0" class="border-list" dense>
        <v-list-item v-for="(item, index) in items" :key="index" @click="itemClick(item)">
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:"MySearch",
  data () {
    return {
      searchValue: '',
      showSelect: true,
      items: []
    }
  },
  watch: {
    text: 'inputHandle'
  },

  mounted() {
      // this.loadData();
  },
  methods: {
    // url没确定 暂时用不到
    // loadData(){
    //   axios.get('').then(res =>{
    //     console.log(res,res.status,res.data);
    //   }).catch(err=>{
    //     console.log(err.message);
    //   })
    // },

    itemClick (item) {
      this.searchValue = item.name
      this.$refs.search.blur()
      // this.$router.push()
    },
    inputHandle (text) {
      if (text.trim() !== '') {
        this.showSelect = true
        setTimeout(() => {
          this.getEntity()
        }, 300)
      }
    },
    getEntity () {
      // 请求接口更新 items 数据
      this.items = [
        {
          key: '1234',
          name: '1234'
        },
        {
          key: 'abc',
          name: 'abc'
        },
        {
          key: 'def',
          name: 'def'
        },
        {
          key: 'ccc',
          name: 'ccc'
        },
      ]
    },
    search () {
      this.$refs.search.blur()
      console.log(this.searchValue)
      // this.$router.push()
    }
  }
}
</script>

<style scoped>
.input-search {
  width: 80%;
  margin: auto;
}

.border-list {
  border: 1px solid #eee !important;
}
/*.width-20-percent {*/
/*   width: 20%;*/
/* }*/
/*.img-div {*/
/*  margin: 16vh 0 40px 0;*/
/*  text-align: center;*/
/*}*/
/*.v-menu__content {*/
/*  box-shadow: none !important;*/
/*}*/
</style>
